<template>
	<view class="ys">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.url | getImg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 	<view class="hot">
			本周热门
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toPage('./list')">
				<image src="/static/img/aimv.jpg" mode=""></image>
				<view class="title">
					测试视频1
				</view>
			</view>
		</view> -->
		<view class="hot">
			热门推荐
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="clickVideo(item)">
				<image :src="item.cover | getImg" mode=""></image>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		videolist,
		videogetBanner
	} from "@/api/api.js"
	export default {
		data() {
			return {
				banner: [],
				list: [],
				page: 1,
				last_page: 1
			}
		},
		onLoad() {
			this.videolist()
			this.videogetBanner()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.videolist()
			}
		},
		methods: {
			clickVideo(item) {
				if (item.upload == 2) {
					// #ifdef H5
					window.location.href = item.href
					// #endif
					// #ifdef APP
					this.toPage('./web?src=' + encodeURIComponent(item.href))
					// #endif
				} else {
					this.toPage('./list?id=' + item.id)
				}
			},
			videogetBanner() {
				videogetBanner().then(res => {
					if (res.status == 1) {
						this.banner = res.data
					}
				})
			},
			videolist() {
				videolist({
					page: this.page
				}).then(res => {
					if (res.status == 1) {
						this.list = this.list.concat(res.data.data)
						this.last_page = res.data.last_page
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 10px;
	}

	.hot {
		width: 96%;
		margin: 15px auto;
		box-sizing: border-box;
		padding: 0 3%;
		font-weight: bold;
		border-left: 5px solid #8980fd;
		font-size: 15px;
	}

	.swiper {
		width: 100%;
		height: 160px;

		swiper {
			height: 160px;
			padding: 0 2%;
		}

		image {
			width: 100%;
			height: 160px;
			border-radius: 8px;
		}
	}

	.list {
		display: grid;
		grid-template-columns: repeat(3, 31%);
		column-gap: 3%;
		padding: 0 2%;

		.item {
			box-sizing: border-box;
			background: #fff;
			font-size: 14px;
			margin: 10px 0%;
			margin-bottom: 5px;
			border-radius: 8px;

			image {
				width: 100%;
				height: 130px;
				border-radius: 8px;
			}

			.title {
				padding: 4px 0 10px 0;
				text-align: center;
				box-sizing: border-box;
			}
		}
	}
</style>